<template>
  <EcDialog v-model="dialogVisible" :auto-height="true" :show-fullscreen="false" top="25vh" width="42%">
    <!-- 标题 -->
    <template #title>
      <div class="dialog-title">
        <!--        <SvgIcon icon="guide" size="16" style="margin-right: 5px;"></SvgIcon>-->
        <span>{{ title || '审核操作' }}</span>
      </div>
    </template>

    <!-- 表单数据 -->
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="92px">
      <el-form-item label="审核状态：" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio-button :value="1">通过</el-radio-button>
          <el-radio-button :value="0">拒绝</el-radio-button>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="审核原因：" prop="reason">
        <el-input v-model="formData.reason" :autosize="{ minRows: 3}" :maxlength="200" placeholder="请输入审核原因" type="textarea"/>
      </el-form-item>
    </el-form>

    <!-- 底部操作区域 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmitForm()">确 定</el-button>
      </span>
    </template>
  </EcDialog>
</template>

<script lang="ts" setup>
import { EcDialog } from '@/components/dialog';
import { h, reactive, ref } from 'vue';
import { ElMessageBox, FormInstance, FormRules } from 'element-plus';

const props = defineProps({
  title: {
    type: String,
  },
});

// 是否显示弹窗
const dialogVisible = ref(false);

type AuditData = { id: number; status: number; reason: string; };
// 默认表单数据
const defaultForm: AuditData = <AuditData>{id: 0, status: 1};
// 表单数据
const formData = ref({...defaultForm});
// 表单验证规则
const formRules = reactive<FormRules>({
  status: [{required: true, message: '审核状态不能为空', trigger: 'blur'}],
  reason: [{required: true, message: '审核原因不能为空', trigger: 'blur'}],
});
const formRef = ref<FormInstance>();

/** 打开弹窗 */
const open = async (id: number) => {
  dialogVisible.value = true;
  // 初始化表单数据
  formData.value = {...defaultForm};
  formData.value.id = id;
  // 重置界面表单数据
  formRef.value?.resetFields();
};

// 提供 open 方法，用于打开弹窗
defineExpose({open});

/** 表单提交 */
const emit = defineEmits(['SubmitAudit']);
const onSubmitForm = async () => {
  await formRef.value?.validate((valid, fields) => {
    if (!valid) return;

    ElMessageBox.confirm(h('p', null, ['是否确认对记录进行 ', h('span', {style: 'font-weight: bold'}, formData.value.status == 1 ? '通过' : '驳回'), ' 操作吗 ？',]), '提示', {
      type: 'warning',
      closeOnClickModal: false,
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(() => {
      // 发送提交审核操作
      emit('SubmitAudit', formData.value)
      // 隐藏窗口
      dialogVisible.value = false
    }).catch(() => {

    });
  });
};
</script>

<style lang="scss" scoped>

</style>
